/**
 * 3D抽屉效果
 */


.minirefresh-theme-drawer3d
    .minirefresh-downwrap
        position: absolute;
        top: 0;
        left: 0;
        height: 200px;
        background: #000000;
        /*
         * 开启3D视角，经测试，就算不写，只要有translateZ,在iOS下默认也有这个效果
         * http://www.w3cplus.com/css3/transform-basic-property.html
         * */
        transform-style: preserve-3d;
        -webkit-transform-style: preserve-3d;
        /**
         * 隐藏不可见元素
         */
        backface-visibility: hidden;
        
        .downwrap-content
            width: 100%;
            margin-top: 20px;
            text-align: center;
    
    /**
     * 由于父容器开启了preserve-3d 3D视角（iOS中只有有translateZ就相当于会默认开启），所以如果直接是drawer3d进行变换，会有一部分无法显示
     * 需要中间来一个舞台，舞台占满宽高
     */
    .state-3d
        width: 100%;
        height: 100%;
        transform: translateZ(0);
        -webkit-transform: translateZ(0);
        perspective: 100px;
        -webkit-perspective: 100px;
        /*
         * 视角和子元素的origin保持一致
         */
        perspective-origin: center bottom;
        -webkit-perspective-origin: center bottom;
    
    .drawer3d
        position: absolute;
        left: 0;
        bottom: 0;
        width: 100%;
        background: #FFFFFF;
        text-align: center;
        -webkit-animation-fill-mode: both;
        animation-fill-mode: both;
        -webkit-transform-origin: center bottom;
        transform-origin: center bottom;
        
        .drawer3d-mask
            position: absolute;
            left: 0;
            top: 0;
            width: 100%;
            height: 100%;
            background: #D3D3D3;
            /*
            * 最终的透明度是计算生成的
            */
            opacity: .4;       
